<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="queryParam.name"
        placeholder="搜索姓名"
        prefix-icon="el-icon-search"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <RoleRadio v-model="queryParam.role" button student teacher @role-change="pageUserList" />
      <CollegeSelect v-model="queryParam.collegeId" class="filter-item" />
      <MajorSelect
        v-if="queryParam.role === STUDENT"
        v-model="queryParam.majorId"
        :college-id="queryParam.collegeId"
        class="filter-item"
      />
      <ClassSelect
        v-if="queryParam.role === STUDENT"
        v-model="queryParam.classId"
        :major-id="queryParam.majorId"
        class="filter-item"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        class="filter-item"
        icon="el-icon-refresh-left"
        @click="handleResetFilter"
      >重置</el-button>
    </div>

    <el-table
      v-loading="loading"
      :data="userList"
      border
      highlight-current-row
      @sort-change="sortChangeUserList"
    >
      <el-table-column label="学号" prop="id" sortable="custom" />
      <el-table-column label="姓名" prop="name" />
      <el-table-column v-if="queryParam.role === STUDENT" label="所属班级" prop="className" />
      <el-table-column v-if="queryParam.role === STUDENT" label="所属专业" prop="majorName" />
      <el-table-column label="所属学院" prop="collegeName" />
      <el-table-column label="性别" prop="sex">
        <template #default="{ row }">
          {{ row.sex | sexFilter }}
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status">
        <template #default="{ row }">
          <el-tag :type="row.status | statusTagTypeFilter">
            {{ row.status | statusFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            plain
            type="primary"
            icon="el-icon-edit"
            @click.native="handleShowUpdateUserDialog(row)"
          />
          <el-button
            plain
            type="danger"
            icon="el-icon-delete"
            @click="handleDeleteUser(row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page-num.sync="queryParam.pageNum"
      :page-size.sync="queryParam.pageSize"
      @pagination="pageUserList"
    />

    <el-dialog
      title="修改用户"
      :visible.sync="showDialog"
      :append-to-body="true"
      @close="showDialog = false"
    >
      <el-form ref="userFrom" label-width="80px" :model="userFrom" :rules="rules">
        <el-form-item label="所属学院" prop="collegeId">
          <CollegeSelect v-model="userFrom.collegeId" />
        </el-form-item>
        <el-form-item v-if="queryParam.role === STUDENT" label="所属专业" prop="majorId">
          <MajorSelect
            v-if="queryParam.role === STUDENT"
            v-model="userFrom.majorId"
            show-major-name
            :college-id="userFrom.collegeId"
          />
        </el-form-item>
        <el-form-item v-if="queryParam.role === STUDENT" label="所属班级" prop="classId">
          <ClassSelect
            v-if="queryParam.role === STUDENT"
            v-model="userFrom.classId"
            show-class-name
            :major-id="userFrom.majorId"
          />
        </el-form-item>
        <el-form-item label="学号" prop="id">
          <el-input
            ref="id"
            v-model="userFrom.id"
            :disabled="true"
            type="text"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input
            ref="name"
            v-model="userFrom.name"
            placeholder="请输入姓名"
            type="text"
          />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <SexRadio v-model="userFrom.sex" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <StatusRadio v-model="userFrom.status" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleUpdateUser()">确认修改</el-button>
          <el-button @click="showDialog = false">取消修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { CollegeSelect, MajorSelect, ClassSelect, RoleRadio, SexRadio, StatusRadio, Pagination } from '@/views/admin/import'
import { ROLE, SEX, STATUS, ORDER } from '@/constant/user'
import { sexMap, statusMap, statusTagTypeMap } from '@/constant/filterMap'
import { pageUserList, getUser, updateUser, deleteUser } from '@/api/admin/user'

export default {
  name: 'ViewUser',
  components: { CollegeSelect, MajorSelect, ClassSelect, RoleRadio, SexRadio, StatusRadio, Pagination },
  filters: {
    sexFilter(sex) {
      return sexMap[sex]
    },
    statusTagTypeFilter(status) {
      return statusTagTypeMap[status]
    },
    statusFilter(status) {
      return statusMap[status]
    }
  },
  data() {
    return {
      queryParam: {
        pageNum: 1,
        pageSize: 5,
        orderField: undefined,
        orderRule: ORDER.DESC,
        role: ROLE.STUDENT,
        collegeId: undefined,
        majorId: undefined,
        classId: undefined,
        name: ''
      },
      userFrom: {
        id: '',
        collegeId: undefined,
        majorId: undefined,
        classId: undefined,
        name: '',
        sex: SEX.MAN,
        status: STATUS.ENABLE
      },
      rules: {
        collegeId: [{ required: true, message: '请选择所属学院', trigger: 'blur' }],
        majorId: [{ required: true, message: '请选择所属专业', trigger: 'blur' }],
        classId: [{ required: true, message: '请选择所属班级', trigger: 'blur' }],
        name: [
          { required: true, message: '请输入班级名', trigger: 'blur' },
          { min: 2, max: 30, message: '班级名长度不能超过30个字符', trigger: 'blur' }
        ]
      },
      STUDENT: ROLE.STUDENT,
      loading: false,
      showDialog: false,
      userList: [],
      total: 0
    }
  },
  created() {
    this.pageUserList()
  },
  methods: {
    /**
     * 获取用户信息
     */
    async pageUserList() {
      this.loading = true
      const data = await pageUserList(this.queryParam)
      this.userList = data.records
      this.total = data.total
      this.loading = false
    },
    /**
     * 搜索用户信息
     */
    handleFilter() {
      this.queryParam.pageNum = 1
      this.pageUserList()
    },
    /**
     * 重置搜索条件
     */
    handleResetFilter() {
      this.queryParam = {
        pageNum: 1,
        pageSize: 5,
        orderField: undefined,
        orderRule: ORDER.DESC,
        role: ROLE.STUDENT,
        collegeId: undefined,
        majorId: undefined,
        classId: undefined,
        name: ''
      }
      this.pageUserList()
    },
    /**
     * 用户信息排序
     * @param data 排序信息
     */
    async sortChangeUserList(data) {
      const { prop, order } = data
      this.queryParam.orderField = prop
      this.queryParam.orderRule = order === 'ascending' ? ORDER.ASC : ORDER.DESC
      await this.pageUserList()
    },
    /**
     * 显示修改用户信息对话框
     * @param row 点击行对应的用户信息
     */
    async handleShowUpdateUserDialog(row) {
      this.userFrom = await getUser(row.id, this.queryParam.role)
      this.$nextTick(() => {
        this.showDialog = true
      })
    },
    /**
     * 修改用户信息
     * @param row 点击行对应的用户信息
     */
    handleUpdateUser(row) {
      this.$refs.userFrom.validate(async valid => {
        if (valid) {
          await updateUser(this.userFrom, this.queryParam.role)
          this.showDialog = false
          this.$message.success('修改用户成功')
          await this.pageUserList()
        }
      })
    },
    /**
     * 删除用户信息
     * @param row 点击行对应的用户信息
     */
    handleDeleteUser(row) {
      this.$confirm('此操作将永久删除用户，是否删除？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteUser(row.id, this.queryParam.role)
        this.$message.success('删除用户成功')
        await this.pageUserList()
      }).catch()
    }
  }
}
</script>
